<!-- 首页优惠券 -->
<template>
    <view class="coupon-item">
        <view class="left">
            <view class="couponMoneyBox">
                <text class="moneyUnit">¥</text>
                <text class="momeyNum">30</text>
            </view>
            <view class="divider" />
            <view class="moneyType">
                通用券
            </view>
        </view>
        <view class="right">
            <view class="couponType">
                平台通用券
            </view>
            
            <!-- 进步器 -->
            <u-number-box
                v-if="showType === 'num'"
                :name="item.id"
                v-model="item.num"
                bgColor="#00000000"
                :min="0"
                disabledInput
                @change="e => $emit('numberBoxChange', e)"
            >
                <u-icon slot="minus" name="minus-circle" color="#9F07B7" size="50rpx" />
                <u-icon slot="plus" name="plus-circle-fill" color="#9F07B7" size="50rpx" />
            </u-number-box>
            
            <!-- 有效期类型 -->
            <view v-else-if="showType === 'time'" class="time">
                有效期7天
            </view>
            
            <!-- 去使用 -->
            <view v-else-if="showType === 'use'" class="toUse" @tap="toUse">
                立即使用
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {

            }
        },
        props: {
            item: {
                type: Object
            },
            showType: {
                type: String,
                default: 'time' // time：有效期XX天，num：进步器，加减数量
            }
        },
        methods: {
            toUse() {
                uni.navigateTo({
                    url: '/pages/timelyDelivery/timelyDelivery'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coupon-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 22rpx 0;
        background-color: $uni-bg-color-coupon-bg;
        border: solid #EFEFEF;
        border-width: 1px 1px 1px 0;
        border-radius: 8rpx;
        overflow: hidden;

        .left {
            width: 236rpx;
            background: $uni-bg-color-coupon;
            border-radius: $uni-border-radius-base;
            color: $uni-text-color-emphasis;

            .couponMoneyBox {
                margin: 20rpx;
                font-family: PingFang HK, PingFang HK;
                font-weight: 500;
                text-align: center;

                .moneyUnit {
                    font-size: 31rpx;
                }

                .momeyNum {
                    font-size: 43rpx;
                }
            }

            .divider {
                margin: 0 20rpx;
                border-top: 1px dashed $uni-border-color-btm;
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;
                    width: 30rpx;
                    height: 30rpx;
                    background: rgb(253, 252, 245);
                    border-radius: 50%;
                    position: absolute;
                    top: -15.5rpx;
                    left: -40rpx;
                }

                &:after {
                    content: '';
                    display: inline-block;
                    width: 30rpx;
                    height: 30rpx;
                    background: linear-gradient(90deg, rgb(253, 252, 245) 0%, rgb(253, 252, 245) 30%, #00000000 100%);
                    border-radius: 50%;
                    position: absolute;
                    top: -15.5rpx;
                    right: -40rpx;
                }
            }

            .moneyType {
                margin: 12rpx;
                font-family: PingFang SC, PingFang SC;
                font-size: 24rpx;
                text-align: center;
            }
        }

        .right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30rpx;
            .couponType {
                font-family: PingFang SC, PingFang SC;
                font-size: 34rpx;
                color: $uni-text-color;
            }
            
            // 进步器样式
            .minus {
                width: 22px;
                height: 22px;
                border-width: 1px;
                border-color: #E6E6E6;
                border-style: solid;
                border-top-left-radius: 100px;
                border-top-right-radius: 100px;
                border-bottom-left-radius: 100px;
                border-bottom-right-radius: 100px;
                @include flex;
                justify-content: center;
                align-items: center;
            }
        
            .input {
                padding: 0 10px;
            }
        
            .plus {
                width: 22px;
                height: 22px;
                background-color: #FF0000;
                border-radius: 50%;
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                justify-content: center;
                align-items: center;
            }

            .time {
                font-family: PingFang SC, PingFang SC;
                font-size: 26rpx;
                color: $uni-color-error;
            }
            
            .toUse {
                width: 160rpx;
                height: 62rpx;
                border-radius: 100rpx;
                border: 1rpx solid $uni-color-primary;
                font-size: 30rpx;
                color: $uni-color-primary;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>